<template>
  <div class="after-person">

      <Breadcrumb>
          <BreadcrumbItem>活动设置</BreadcrumbItem>
          <BreadcrumbItem>核销员工</BreadcrumbItem>
      </Breadcrumb>

      <Tabs :value="tabs[tabs_index].name" @on-click="changeTabs">
          <TabPane v-for="item in tabs" :label="item.label" :name="item.name">
              <template v-if="item.name == 'staff' || item.name == 'wait'">
                  <Table :columns="th" :data="tr"></Table>
              </template>
              <template v-else>
                  <img class="add-qrcode" :src="add_qrocde" />
                  <h2 style="text-align: center;font-size:20px;margin-top: 10px;">普通用户扫一扫可申请核销员工</h2>
              </template>
          </TabPane>
      </Tabs>
  </div>
</template>

<script>
import Common from '../../common/common.js';
export default {
  name: 'after-person',
  data(){
    var self = this;
    return {
        activity_id:0,
        person_id:0,
        tabs:[
            {
                name:'staff',
                label:'员工列表',
                th:[
                    {
                        title:'用户id',
                        key:'uid'
                    },
                    {
                        title:'头像',
                        key:'header',
                        render:(h,params)=>{
                            return h('img',{
                                attrs:{
                                    src:params.row.header
                                },
                                style:{
                                    width:'50px',
                                    height:'50px',
                                    verticalAlign:'middle'
                                }
                            })
                        }
                    },
                    {
                        title:'昵称',
                        key:'name'
                    },
                    {
                        title:'操作',
                        key:'control',
                        render:(h,params)=>{
                            return h('div',[
                                h('Button',{
                                    props:{
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style:{
                                        'margin-right':'5px'
                                    },
                                    on:{
                                        click(){
                                            self.delete(params.row.id);
                                        }
                                    }
                                },'删除')
                            ]);
                        }
                    }
                ]
            },
            {
                name:'wait',
                label:'待审核',
                th:[
                    {
                        title:'用户id',
                        key:'uid'
                    },
                    {
                        title:'头像',
                        key:'header',
                        render:(h,params)=>{
                            return h('img',{
                                attrs:{
                                    src:params.row.header
                                },
                                style:{
                                    width:'50px',
                                    height:'50px',
                                    verticalAlign:'middle'
                                }
                            })
                        }
                    },
                    {
                        title:'昵称',
                        key:'name'
                    },
                    {
                        title:'操作',
                        key:'control',
                        render:(h,params)=>{
                            return h('div',[
                                h('Button',{
                                    props:{
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style:{
                                        'margin-right':'5px'
                                    },
                                    on:{
                                        click(){
                                            self.pass(params.row.id);
                                        }
                                    }
                                },'通过审核'),
                                h('Button',{
                                    props:{
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style:{
                                        'margin-right':'5px'
                                    },
                                    on:{
                                        click(){
                                            self.delete(params.row.id);
                                        }
                                    }
                                },'删除')
                            ]);
                        }
                    }
                ]
            },
            {
                name:'add',
                label:'添加员工'
            }
        ],
        tabs_index:0,
        th:[],
        tr:[],
        add_qrocde:''   //新增员工二维码
    }
  },
    created(){
      this.activity_id = sysinfo.activity_id;
    },
  mounted(){
      this.th = this.tabs[this.tabs_index].th;
      this.addQrcode();
      this.list();
  },
  methods:{
    //获取新增二维码
    addQrcode(){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'afterPerson',
            doing:'addQrcode',
            activity_id:this.activity_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.add_qrocde = res.data.data;
                }
            })
            .catch(error=>console.log(error));
    },
    //列表
    list(){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'afterPerson',
            doing:'li',
            activity_id:this.activity_id,
            status:this.tabs[this.tabs_index].name == 'staff' ? 1 : 2
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.tr = res.data.data;
                }else{
                    this.tr = [];
                }
            })
            .catch(error=>console.log(error));
    },
    //点击切换tabs事件
    changeTabs(res){
        if(res == 'staff'){
            this.tabs_index = 0;
            this.th = this.tabs[this.tabs_index].th;
            this.list();
        }else if(res == 'wait'){
            this.tabs_index = 1;
            this.th = this.tabs[this.tabs_index].th;
            this.list();
        }
    },
    //通过审核
    pass(person_id){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'afterPerson',
            doing:'passAfterPerson',
            person_id:person_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.list();
                }
            })
            .catch(error=>console.log(error));
    },
    //删除
    delete(person_id){
        this.$Modal.confirm({
            title:'提示',
            content:'确定要删除该数据吗？',
            onOk:()=>{
                Axios.post(sysinfo.url,Qs.stringify({
                    pages:'afterPerson',
                    doing:'deleteAfterPerson',
                    person_id:person_id
                }))
                    .then((res)=>{
                        if(res.data.status == 'success'){
                            this.list();
                        }
                    })
                    .catch(error=>console.log(error));
            }
        });
    }
  }
}
</script>

<style scoped>
    .after-person{
        padding:10px;
    }
    .add-qrcode{
        display:block;
        width:200px;
        height:200px;
        margin:0 auto;
        border:2px solid #ccc;
    }
</style>
